

import React, { Component } from 'react';
import { Image, Text, TouchableOpacity, View, StyleSheet } from 'react-native';

import Icon from 'react-native-vector-icons/Ionicons'

export default class NextItem extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <TouchableOpacity key={this.props.item.name} style={styles.childViewStyle}
                onPress={() => this.props.buttonPress(this.props.item)}
            >
                {this.leftView()}
                <View style={{ flex: 1, alignItems: 'flex-end', justifyContent: 'flex-end',flexDirection:'row'}}>
                    <Icon style={{ marginRight: 10,marginBottom:6}} name='ios-arrow-forward' size={30} />
                </View>
            </TouchableOpacity>
        );
    }

    leftView() {

        var obj = this;
        if (this.props.item.image) {
            return <View   flexDirection='row'
                style={{ alignItems: 'center',flex:1,
                alignItems:'center',
                paddingLeft:10,
                paddingTop:14
            }}
            >
                <Image source={{ uri: this.props.item.image }}
                    style={{   width: 30, height: 30, marginRight: 10 }}
                    resizeMode='cover'
                ></Image>
                <Text style={{ lineHeight: 34, fontSize: 17 }}>{obj.props.item.name}</Text>
            </View>
        }
        return <Text style={{ lineHeight: 44, fontSize: 17, paddingLeft: 10 }}>{obj.props.item.name}</Text>
    }
}

const styles = StyleSheet.create({

    childViewStyle: {
        height: 44,
        marginBottom: 10,
        backgroundColor: 'white',
        // justifyContent:'center'

    }

})